<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
              <el-link style="font-size: 20px;font-weight: bold;">
                <div style="display: flex;align-items: center;"><img src="../assets/logo.png" style="width: 45px;"/>个人健康管理系统</div>
              </el-link>
            </el-header>
            <el-main style="padding: 0;">
                <div class="main">
                    <div class="login" v-if="login">
                        <el-row>
                            <el-col :span="24">
                                <h3 style="color: #8eda8e;">
                                  个人健康管理系统登录页
                                </h3>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-input v-model="ruleForm.userPhone" size="large" placeholder="请填写账号/手机号" clearable />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-input v-model="ruleForm.password" size="large" type="password" placeholder="请填写密码" clearable />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-radio-group v-model="ruleForm.userRole" class="ml-4">
                                <el-radio label="A" size="large">管理员</el-radio>
                                <el-radio label="U" size="large">普通用户</el-radio>
                            </el-radio-group>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-input v-model="ruleForm.code" size="large" placeholder="请输入验证码" clearable />

                            </el-col>
                            <el-col :span="8">
                                <img :src="captchaImg" @click="refreshCaptcha" style="width:90px;height: 38px;border: 1px solid #ccc;" />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" style="flex-basis: 0">
                                <el-checkbox v-model="checked2">是否自动登录</el-checkbox>
                            </el-col>
                            <el-col :span="12" style="margin-left: auto">
                                <el-button text type="primary" @click="registerStatus()">没有账号？点我注册</el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-button color="#4A9BB9" style="width: 100%;height: 50px;font-size: 20px;border-radius: unset" @click="userLogin()">登录</el-button>
                            </el-col>
                        </el-row>

                    </div>
                    <div class="login" v-else>
                        <el-row>
                            <el-col :span="24">
                              <h3 style="color: #8eda8e;">
                                个人健康管理系统注册页
                              </h3>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-input v-model="ruleForm.userName" size="large" placeholder="请填写昵称" clearable />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-input v-model="ruleForm.userPhone" size="large" placeholder="请填写账号/手机号" clearable />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-input v-model="ruleForm.password" size="large" type="password" placeholder="请填写密码" clearable />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-radio-group v-model="ruleForm.userRole" class="ml-4">
                                <el-radio label="A" size="large">管理员</el-radio>
                                <el-radio label="U" size="large">普通用户</el-radio>
                            </el-radio-group>
                            <el-col :span="10" style="margin-left: auto;margin-top: 6px;">
                              <el-button text type="warning" @click="registerStatus()">已有账号？去登录</el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-button type="warning" style="width: 100%;height: 50px;font-size: 20px;border-radius: unset;" @click="register()">注册</el-button>
                            </el-col>
                        </el-row>

                    </div>
                </div>
            </el-main>
            <el-footer style="padding: 15px;color: #b0b0b0">
                <span>@"linyouy@outlook.com" 版权所有</span>
            </el-footer>
        </el-container>
    </div>
</template>


<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                login:true,
                captchaImg: '',//验证码
                checked2:'',
                ruleForm:{
                    userName:'',
                    userPhone:'18696004121',
                    password:'123456',
                    userRole:'A',
                    code:'',
                },
            };
        },
        watch: {},
        computed: {},
        methods: {

            /**
             * 登录
             * @returns {Promise<void>}
             */
            async userLogin() {
                const {data: res} = await this.$http.post("user/login", this.ruleForm);
                console.log(res)
                if (res.code==200){
                    this.$message.success("登录成功！");
                    //存储token
                    sessionStorage.setItem("token",res.data);
                    this.$router.push("/home");
                }else if (res.code==50013){
                    this.refreshCaptcha();//刷新验证码
                    this.$message.error("验证码输入有误！")
                }else if (res.code==50001){
                    this.$message.error("请确认账号密码以及角色是否正确！")
                }else {
                    this.$message.error("服务器异常，请稍后再试！")
                }
            },

            //注册
            async register() {
                const {data: res} = await this.$http.post("user/register", this.ruleForm);
                console.log(res)
                if (res.code == 200) {
                    this.$message.success('注册成功，请前往登录~');
                    this.login = true;
                }else{
                    console.log("00000000")
                    this.$message.error("账号已注册！");
                }
            },
            registerStatus(){
                this.login=!this.login;
            },
          refreshCaptcha() {
            console.log("开始刷新验证码");
            this.$http.get("captcha/get", {
              responseType: "blob"
            }).then(res => {
              // console.log("验证码接口响应成功:", res);
              const reader = new FileReader();
              reader.onloadend = () => {
                // console.log("FileReader 读取完成:", reader.result);
                this.captchaImg = reader.result;
                // console.log("更新后的 captchaImg:", this.captchaImg);
                this.$nextTick(() => {
                  // console.log("DOM 更新完成");
                });
              };
              reader.onerror = () => {
                console.error("FileReader 读取失败:", reader.error);
                this.$message.error("读取验证码图片失败，请稍后再试！");
              };
              reader.readAsDataURL(res.data);
            }).catch(error => {
              console.error("获取验证码失败:", error);
              this.$message.error("获取验证码失败，请稍后再试！");
            });
          }

        },
        created() {

        },
        mounted() {
          // debugger;
            this.refreshCaptcha();
        }
    };
</script>
<style scoped>
    .login> .el-row{
        margin-top: 20px;
    }
    .login{
        width: 25%;
        height: 420px;
        background-color: rgba(0,0,0,0.25);
        float: right;
        margin: 150px 150px;
        padding: 20px 20px;
    }
    .header{
        text-align: left;
        padding: 10px 150px;
        font-size: 22px;
        font-weight: bold;
        font-family: 幼圆;
        color: #4A9BB9;
    }

    .main{
        background-image: url('../assets/img/Bg.png');
        background-size: cover;
        background-repeat: no-repeat;
        height: 800px;
    }
</style>
